<template>
  <div id="category">
    <nav-bar class="nav-bar">
      <template v-slot:center> 商品分类 </template>
    </nav-bar>

    <div class="content">
      <!-- 封装左菜单栏 -->
      <tab-menu :categories="categories" @selectItem="selectItem" />
      <!-- 封装右展示栏 -->
      <scroll id="tab-content"
        ><tab-content-category :subcategories="showSubcategory" />
        <!-- <tab-control
          class="control"
          :titles="['综合', '新品', '销量']"
          @tabClick="tabClick"
        ></tab-control> -->
        <!-- <tab-content-detail
          :category-detail="showCategoryDetail"
        ></tab-content-detail> -->
      </scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";

import TabMenu from "./childComps/TabMenu.vue";
// import TabControl from "components/content/tabcontrol/TabControl";
import TabContentCategory from "./childComps/TabContentCategory.vue";
// import TabContentDetail from "./childComps/TabContentDetail.vue";

import Scroll from "components/common/scroll/Scroll";
import {
  getCategory,
  getSubcategory,
  getCategoryDetail,
} from "network/category";
import { POP, SELL, NEW } from "@/common/const";

export default {
  name: "Category",
  components: {
    NavBar,
    TabMenu,
    TabContentCategory,
    // TabContentDetail,
    Scroll,
  },

  data() {
    return {
      categories: [],
      categoryData: {},
      currentIndex: -1,
    };
  },
  created() {
    //1.事件初始化完成请求数据
    this._getCategory();
  },
  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return {};
      return this.categoryData[this.currentIndex].subcategories;
    },
  },

  methods: {
    ////////////////////////////////////////监听事件///////////////////////////////
    // tabClick(index) {},
    selectItem(index) {
      this._getSubcategories(index);
    },
    ////////////////////////////////////////数据请求///////////////////////////////
    //1.获取分类数据
    _getCategory() {
      getCategory().then((res) => {
        // console.log(res);
        this.categories = res.data.category.list;
        // console.log(this.categories);
        //2.初始化每个类别的子数据
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };
        }
        // console.log(this.categoryData);
        //3.请求第一个分类的数据
        this._getSubcategories(0);
      });
    },
    _getSubcategories(index) {
      this.currentIndex = index;
      const maitKey = this.categories[index].maitKey;
      getSubcategory(maitKey).then((res) => {
        // console.log(res);
        this.categoryData[index].subcategories = res.data;
        this.categoryData = { ...this.categoryData };
        this._getCategoryDetail(POP);
        this._getCategoryDetail(NEW);
        this._getCategoryDetail(SELL);
      });
    },
    _getCategoryDetail(type) {
      //1.获取请求的miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      //2.发送请求，传入miniWallkey和type
      getCategoryDetail(miniWallkey, type).then((res) => {
        // console.log(res);
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
      });
    },
  },
};
</script>

<style scoped>
#category {
  height: 100vh;
}
#category .nav-bar {
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;
  display: flex;
}

#tab-content {
  height: 100%;
  flex: 1;
}
</style>